<!-- 商品热点区组件 -->
<template>
  <div class="indexnews">
    <img src="@/assets/image/04.png" alt="" />
    <div class="swipe-text">
      <ul ref="news" :class="{ transition: flag }">
        <li v-for="list in newslistdatas" :key="list.id">
          <a href="javascript:;">
            <p v-text="list.title"></p>
          </a>
        </li>
      </ul>
    </div>
    <span class="iconfont icon-right"></span>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      timer: null,
      flag: false,
      newslistdatas: [
        {
          id: 1,
          title: "服务店突破2000多家",
        },
        {
          id: 2,
          title: "我们成为中国最大家电零售B2B2C系统",
        },
        {
          id: 3,
          title: "三大国际腕表品牌签约",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    scrollnews() {
      var oul = this.$refs.news;
      oul.style.top = "-3.6rem";
      this.flag = !this.flag;
      setTimeout(() => {
        this.newslistdatas.push(this.newslistdatas[0]);
        this.newslistdatas.shift();
        oul.style.top = "-0.6rem";
        this.flag = !this.flag;
      }, 500);
    },
  },
  mounted() {
    this.timer = setInterval(this.scrollnews, 3000);
  },
  destroyed() {
    //组件销毁清除定时器
    clearInterval(this.timer);
  },
};
</script>
<style lang="less">
.indexnews {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 0 0 15px 15px;
  position: relative;
  padding: 0.7rem 1rem;
  width: 94%;
  margin-left: 3%;
  box-sizing: border-box;
  &:after {
    position: absolute;
    content: " ";
    top: 1px;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background-color: #ededed;
  }

  img {
    display: block;
    width: 70px;
    margin-right: 10px;
  }

  .swipe-text {
    width: 100%;
    height: 1.7rem;
    overflow: hidden;

    ul {
      position: relative;
      top: -0.6rem;
      li {
        height: 3rem;
        line-height: 3rem;
      }
      a {
        display: block;
        height: 100%;
        p {
          color: #000;
          font-size: 13px;
          font-weight: 600;
        }
      }
    }
    .transition {
      transition: all 0.5s;
    }
  }

  span {
    color: #f10d23;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>